<template>
  <view class="main-container">
    <image class="logo" src="../../static/logo.png"></image>
    <view>
      <text class="title">{{ title1 }}</text>
      <button type="primary" @click="loginClick">点击按钮</button>
      <icon :type="value" size="26"/>
      <checkbox-group>
        <label>
          <checkbox value="cb" checked="true" />选中
        </label>
        <label>
          <checkbox value="cb" />未选中
        </label>
      </checkbox-group>
      <view class="uni-common-mt" style="background:#FFF; padding:20rpx;">
        <rich-text :nodes="nodes"></rich-text>
      </view>
      <view class="uni-title uni-common-mt">
        字符串类型
        <text>\nnodes属性为String</text>
      </view>
      <view class="uni-padding-wrap uni-common-mt">
        <view class="progress-box">
          <progress :percent="pgList[0]" show-info stroke-width="3" />
        </view>
        <view class="progress-box">
          <progress :percent="pgList[1]" stroke-width="3" />
        </view>
        <view class="progress-box">
          <progress :percent="pgList[2]" stroke-width="3" />
        </view>
        <view class="progress-box">
          <progress :percent="pgList[3]" activeColor="#10AEFF" stroke-width="3" />
        </view>
        <view class="progress-control">
          <button type="primary" @click="setProgress">设置进度</button>
          <button type="warn" @click="clearProgress">清除进度</button>
        </view>
      </view>
      <view style="margin-top: 20px">
        <navigator url="/pages/login"
                   hover-class="other-navigator-hover">
          <button type="primary" @click="btnClick">点位打开登录页面</button>
        </navigator>
      </view>
    </view>
  </view>
</template>
<script setup lang="ts">
import {onMounted, ref} from 'vue'
// 定义数据域
const title = ref('Hello')
const title1 = ref('Hello fzy')

// 定义函数域
const btnClick = () => {
  console.log('我被点击了哦')
}

// 生命周期函数
onMounted(() => {
  console.log("页面被加载了呢")
})

</script>

<style>
.main-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.logo {
  height: 200rpx;
  width: 200rpx;
  margin: 200rpx auto 50rpx auto;
}

.title {
  font-size: 36rpx;
  color: #8f8f94;
}

</style>
